<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
	</head>
	<body>
			<form class="layui-form"   action="" style="margin-left: 60px;margin-top: 30px;">
				<div class="layui-form-item" hidden="hidden">
					<label class="layui-form-label">用户ID:</label>
					<div class="layui-input-inline" style="width:350px;">
					<!--隐藏-->
						<input type="text" id="id" name="id" class="layui-input" readonly="true">
					</div>
				</div>
				<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>图片地址</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test1">
				  			<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img id="imgFace" style="width: 120px;" src="" >
					<input type="hidden" id="imgUrl" name="imgUrl" required lay-verify="required" placeholder="图片地址" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>商品名称</label>
				<div class="layui-input-inline">
					<input type="text" name="imgTitle" id="imgTitle" required lay-verify="required" value=" " autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>商品分类</label>
			<div class="layui-input-inline">
				<select name="Name" id="Name" style="width: 150px; height: 50px;margin-left: 41px;border: 2px solid green; margin: 17px;">
				       <option value="1" selected="">化妆品系列</option>
				        <option value="2">时尚系列</option>
				        <option value="3">珍藏系列</option>
				        <option value="4">潮流系列</option>
				      </select>
				      </div>
			</div>	
				
				<div class="layui-btn-container" style="text-align:center;" >
					<button class="layui-btn" lay-filter="userEditBtu" lay-submit="" style="margin-left: -43px; margin-top: 15px;">
                        	修改
                    </button>
				</div>
			</form>
		<script type="text/javascript" src="layui/layui.js" ></script>
		<script>
			//加载了layui的form模块
			layui.use(['form','upload'], function() {
				var form = layui.form;
				var $ = layui.jquery; //引入jquery
				 var layer = layui.layer;
				 var upload = layui.upload;
				 var uploadInst = upload.render({
					    elem: '#test1' //绑定元素
					    ,url: '/wk3un7/commodityServlet?method=upload' //上传接口
					    ,done: function(res){
					      $("#imgUrl").val('upload/'+res.data);
					      $("#imgFace").attr('src','../upload/'+res.data);
					      
					    	//上传完毕回调
					    }
					    ,error: function(){
					      //请求异常回调
					    }
					  });
				//监听提交
				form.on('submit(userEditBtu)', function(data) {
					var d = data.field; //表单中的数据，定义一个对象来接收
					d.method = "update"; // 我的密匙、大家用你们自己的
					//通过ajax向数据库提交数据了
					console.log(d); //提交之前的一个数据验证、通过打印的方式先手动的去判断一下这个数据
					var url = ' /wk3un7/commodityServlet';
					//确保数据没有问题就进行ajax提交了
					$.post(url, d,
						function(data) {
							if(data.count>0){
								 console.log('修改成功');
								 layer.msg('修改成功');
								 var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
             					 parent.layer.close(index);		//关闭窗口
							}
						}, "json");
					return false;
				});
			});
		</script>
	</body>
</html>
